<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>个人参赛(白衣天使组)报名</title>
<style>
body,input,button{font:normal 14px "Microsoft Yahei";margin:0;padding:0}
.odform-tit{font-weight:normal;font-size:25px;color:#595757;line-height:40px;text-align:center;border-bottom:1px solid #c9cacb;margin:0;padding:5% 0}
.odform-tit img{height:40px;vertical-align:middle;margin-right:15px}
.odform{padding:5%}
.input-group{margin-bottom:5%;position:relative}
.input-group label{padding:2% 0;position:absolute;color:#595757}
.input-group input{margin-left:5em;padding:3% 5%;box-sizing:border-box;background:#efeff0;border:0;border-radius:5px;color:#595757;width:75%}
.odform button{background:#8ec31f;color:#fff;text-align:center;border:0;border-radius:10px;padding:3%;width:100%;font-size:16px}
.odform .cal{background-image:url(images/daetixian-cal.png);background-repeat:no-repeat;background-position:95% center;background-size:auto 50%}
.odform .xl{background-image:url(images/daetixian-xl.png);background-repeat:no-repeat;background-position:95% center;background-size:auto 20%}
</style>
<style>
		img {
			border: 0;
		}

		body {
			background: #f7f7f7;
			color: #666;
			font: 12px/150% Arial,Verdana, "microsoft yahei";
		}

		html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
			margin: 0;
			padding: 0;
		}

		article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
			display: block;
			margin: 0;
			padding: 0;
		}

		audio,canvas,progress,video {
			display: inline-block;
			vertical-align: baseline;
		}

		a {
			text-decoration: none;
			color: #08acee;
		}

		a:active,a:hover {
			outline: 0;
		}

		button {
			outline: 0;
		}

		mark {
			color: #000;
			background: #ff0;
		}

		small {
			font-size: 80%;
		}

		img {
			border: 0;
		}

		button,input,optgroup,select,textarea {
			margin: 0;
			font: inherit;
			color: inherit;
			outline: none;
		}

		li {
			list-style: none;
		}

		i {
			font-style: normal;
		}

		a {
			color: #666;
		}

		a:hover {
			color: #eee;
		}

		em {
			font-style: normal;
		}

		h2, h3 {
			font-family: "microsoft yahei";
			font-weight: 100;
		}



		/* ------------------- */
		::-moz-placeholder {
			color: #9fa3a7;
		}

		::-webkit-input-placeholder {
			color: #9fa3a7;
		}

		:-ms-input-placeholder {
			color: #9fa3a7;
		}


		.pc-kk-form{
			padding:15px 20px;
		}
		.pc-kk-form-list{
			background:#fff;
			border:1px solid #e5e5e5;
			border-radius:5px;
			height:44px;
			line-height:44px;
			margin-bottom:10px;
		}
		.pc-kk-form-list input{
			width:100%;
			border:none;
			background:none;
			color:#9fa3a7;
			font-size:14px;
			height: 36px;
			padding: 4px 10px;
		}
		.pc-kk-form-list textarea{
			background:none;
			border:none;
			height:60px;
			padding:10px;
			resize:none;
			width:94%;
			line-height:22px;
			color:#9fa3a7;
			font-size:14px;
		}
		.nice-select{
			position: relative;
			background: #fff url(images/a2.jpg) no-repeat right center;
			background-size:18px;
			width:47%;
			float:left;
			border:1px solid #e5e5e5;
			border-radius:5px;
			height:44px;
			line-height:44px;
		}

		.nice-select ul{
			width: 100%;
			display: none;
			position: absolute;
			left: -1px;
			top: 44px;
			overflow: hidden;
			background-color: #fff;
			max-height: 150px;
			overflow-y: auto;
			border: 1px solid #b9bcbf;
			z-index: 9999;
			border-radius:5px;

		}
		.nice-select ul li{
			padding-left:10px;
		}
		.nice-select ul li:hover{
			background:#f8f4f4;
		}
		.pc-kk-form-list-clear{
			background:none;
			border:none;
		}
		.pc-kk-form-btn button{
			background:#ec5224;
			color:#fff;
			border:none;
			width:100%;
			height:50px;
			line-height:50px;
			font-size:16px;
			border-radius:50px;
		}
	</style>
	<script type="text/javascript">
	function beforeSubmit(){
	if(document.getElementById('name').value==''){
	alert('姓名不能为空！');
	document.getElementById('name').focus();
	return false;
	}
	if(document.getElementById('sex').value==''){
	alert('性别不能为空！');
	document.getElementById('sex').focus();
	return false;
	}
	if(document.getElementById('age').value==''){
	alert('年龄不能为空！');
	document.getElementById('age').focus();
	return false;
	}
	if(document.getElementById('phone').value==''){
	alert('手机不能为空！');
	document.getElementById('phone').focus();
	return false;
	}
	if(document.getElementById('idcard').value==''){
	alert('身份证号不能为空！');
	document.getElementById('idcard').focus();
	return false;
	}
	}
	</script>
</head>

<body>
	<div style="position: fixed;top: 3%;left: 2%;"><a href="index.html"><img src="images/daetixian-xl.png" height="30px"/></a></div>
<h3 class="odform-tit">个人参赛-白衣天使</h3>
<div class="pc-kk-form">
		<img src="images/banner.jpg" width="100%" >
		<form action="threeBM" method="post" enctype="multipart/form-data" onsubmit="return beforeSubmit(this)">
			<div class="pc-kk-form-list">
				<input type="text" name="name" id="name" placeholder="姓名">
			</div>
			<div class="pc-kk-form-list pc-kk-form-list-clear">
				<div class="nice-select" name="nice-select">
					<input type="text" name="age" id="age" placeholder="年龄" readonly>
					<ul>
						<li >10</li><li >11</li><li >12</li><li >13</li><li >14</li><li >15</li><li >16</li><li >17</li><li >18</li><li >19</li><li >20</li><li >21</li><li >22</li><li >23</li><li >24</li><li >25</li><li >26</li><li >27</li><li >28</li><li >29</li><li >30</li><li >31</li><li >32</li><li >33</li><li >34</li><li >35</li><li >36</li><li >37</li><li >38</li><li >39</li><li >40</li><li >41</li><li >42</li><li >43</li><li >44</li><li >45</li><li >46</li><li >47</li><li >48</li><li >49</li><li >50</li><li >51</li><li >52</li><li >53</li><li >54</li><li >55</li><li >56</li><li >57</li><li >58</li><li >59</li><li >60</li><li >61</li><li >62</li><li >63</li><li >64</li><li >65</li><li >66</li><li >67</li><li >68</li><li >69</li><li >70</li><li >71</li><li >72</li><li >73</li><li >74</li><li >75</li><li >76</li><li >77</li><li >78</li><li >79</li><li >80</li><li >81</li><li >82</li><li >83</li><li >84</li><li >85</li><li >86</li><li >87</li><li >88</li><li >89</li><li >90</li><li >91</li><li >92</li><li >93</li><li >94</li><li >95</li><li >96</li><li >97</li><li >98</li><li >99</li><li >100</li>
					</ul>

				</div>
				<div class="nice-select" name="nice-select" style="float:right">
					<input type="text" name="sex" id="sex" placeholder="性别" readonly>
					<ul>
						<li data-value="male">男</li>
						<li data-value="female">女</li>
					</ul>

				</div>
			</div>
			<div class="pc-kk-form-list">
				<input type="tel" name="phone" id="phone" placeholder="联系方式">
			</div>
			<div class="pc-kk-form-list">
				<input type="text" name="idcard" id="idcard" placeholder="身份证号">
			</div>
			医务工作者从业证明材料：
			<div class="pc-kk-form-list">
				<input type="file" name="filename" id="filename">
			</div>
			<div class="pc-kk-form-btn">
				<button type="submit">提交报名</button>
			</div>
		</form>
	</div>
</body>

	<script type="text/javascript" src="js/jquery.js"></script>

	<script>





        $('[name="nice-select"]').click(function(e){

            $('[name="nice-select"]').find('ul').hide();

            $(this).find('ul').show();

            e.stopPropagation();

        });

        $('[name="nice-select"] li').hover(function(e){

            $(this).toggleClass('on');

            e.stopPropagation();

        });

        $('[name="nice-select"] li').click(function(e){

            var val = $(this).text();

            $(this).parents('[name="nice-select"]').find('input').val(val);

            $('[name="nice-select"] ul').hide();

            e.stopPropagation();

        });

        $(document).click(function(){

            $('[name="nice-select"] ul').hide();

        });

	</script>
</html>